<template>
    <div class="background">
        <div class="clan-book-container">
            <!-- 左侧部分（保持不变） -->
            <div class="left-section">
                <!-- 上部分：推荐书籍 -->
                <div class="recommended-books">
                    <h2 class="section-title">推荐书籍</h2>
                    <div class="book-covers-carousel">
                        <div class="carousel-container">
                            <div v-for="(book, index) in books" :key="book.id" :class="[
                                'book-cover-card',
                                { 'active': currentBookIndex === index },
                                { 'left': currentBookIndex - index === 1 || (currentBookIndex === 0 && index === books.length - 1) },
                                { 'right': index - currentBookIndex === 1 || (currentBookIndex === books.length - 1 && index === 0) }
                            ]" @click="setActiveBook(index)">
                                <img :src="book.cover" :alt="book.title" class="book-cover" />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 下部分：书籍详情 -->
                <div class="book-details">
                    <div class="details-carousel">
                        <transition name="fade" mode="out-in">
                            <div :key="currentBook.id" class="book-info">
                                <h3 class="book-title">{{ currentBook.title }}</h3>
                                <p class="book-description">{{ currentBook.description }}</p>
                                <div class="book-meta">
                                    <span class="author">{{ currentBook.author }}</span>
                                    <span class="publish-date">{{ formatDate(currentBook.publishDate) }}</span>
                                </div>
                            </div>
                        </transition>
                    </div>

                    <!-- 轮播指示器 -->
                    <div class="carousel-indicators">
                        <span v-for="(book, index) in books" :key="book.id"
                            :class="['indicator', { 'active': currentBookIndex === index }]"
                            @click="setActiveBook(index)"></span>
                    </div>

                    <!-- 书籍详情按钮 -->
                    <button class="details-button" @click="openBookDetail(book)">书籍详情</button>
                </div>
            </div>

            <!-- 右侧部分（已修改） -->
            <div class="right-section">
                <div class="section-header">
                    <h2 class="section-title">地方志</h2>
                    <el-button class="more-button" @click="toMorePage">
                        更多 >
                    </el-button>
                </div>

                <div class="local-books-content">
                    <!-- 左侧竖排书籍卡片（随机一个） -->
                    <div class="vertical-cards">
                        <div class="vertical-book-card" @click="openBookDetail(randomVerticalBook)">
                            <img :src="randomVerticalBook.cover" :alt="randomVerticalBook.title" class="book-image" />
                            <div class="book-info">
                                <h4 class="book-title">{{ randomVerticalBook.title }}</h4>
                                <p class="book-description">{{ randomVerticalBook.description }}</p>
                                <div class="book-meta">
                                    <span class="author">{{ randomVerticalBook.author }}</span>
                                    <span class="publish-date">{{ formatDate(randomVerticalBook.publishDate) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧横排书籍卡片（随机两个） -->
                    <div class="horizontal-cards">
                        <div v-for="book in randomHorizontalBooks" :key="book.id" class="horizontal-book-card"
                            @click="openBookDetail(book)">
                            <img :src="book.cover" :alt="book.title" class="book-image" />
                            <div class="book-info">
                                <h4 class="book-title">{{ book.title }}</h4>
                                <p class="book-description">{{ book.description }}</p>
                                <div class="book-meta">
                                    <span class="author">{{ book.author }}</span>
                                    <span class="publish-date">{{ formatDate(book.publishDate) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <bookDetail v-model="detailVisible" :book="selectedBook" />
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import bookDetail from './component/bookDetail.vue'

interface Book {
    id: number
    title: string
    cover: string
    description: string
    author: string
    publishDate: Date
}
const router = useRouter()
const toMorePage = () => {
    router.push({ name: 'moreBook' })
}
const detailVisible = ref(false)
const selectedBook = ref(null)

// 打开详情弹窗
const openBookDetail = (book: unknown) => {
    selectedBook.value = book
    detailVisible.value = true
}

// 推荐书籍数据
const books = ref<Book[]>([
    {
        id: 1,
        title: '山海经',
        cover: 'https://dummyimage.com/200x300/4a5568/ffffff&text=山海经',
        description: '《山海经》是中国先秦重要古籍，是一部富于神话传说的最古老的奇书。',
        author: '佚名',
        publishDate: new Date(-200, 0, 1)
    },
    {
        id: 2,
        title: '红楼梦',
        cover: 'https://dummyimage.com/200x300/4a5568/ffffff&text=红楼梦',
        description: '中国古典四大名著之首，清代作家曹雪芹创作的章回体长篇小说。',
        author: '曹雪芹',
        publishDate: new Date(1791, 0, 1)
    },
    {
        id: 3,
        title: '西游记',
        cover: 'https://dummyimage.com/200x300/4a5568/ffffff&text=西游记',
        description: '中国古典四大名著之一，是由明代小说家吴承恩所创作的中国古代第一部浪漫主义长篇神魔小说。',
        author: '吴承恩',
        publishDate: new Date(1592, 0, 1)
    },
    {
        id: 4,
        title: '三国演义',
        cover: 'https://dummyimage.com/200x300/4a5568/ffffff&text=三国演义',
        description: '中国第一部长篇章回体历史演义小说，描写了从东汉末年到西晋初年之间近百年的历史风云。',
        author: '罗贯中',
        publishDate: new Date(1522, 0, 1)
    },
    {
        id: 5,
        title: '水浒传',
        cover: 'https://dummyimage.com/200x300/4a5568/ffffff&text=水浒传',
        description: '中国四大名著之一，是一部以北宋末年宋江起义为主要故事背景、类型上属于英雄传奇的章回体长篇小说。',
        author: '施耐庵',
        publishDate: new Date(1368, 0, 1)
    }
])

// 地方志书籍数据
const localBooks = ref<Book[]>([
    {
        id: 1,
        title: '北京地方志',
        cover: 'https://dummyimage.com/150x200/4a5568/ffffff&text=北京志',
        description: '记载北京地区历史、地理、风俗、人物、文教、物产等的专书。',
        author: '北京市地方志编委会',
        publishDate: new Date(2010, 5, 15)
    },
    {
        id: 2,
        title: '上海地方志',
        cover: 'https://dummyimage.com/150x200/4a5568/ffffff&text=上海志',
        description: '记载上海地区历史沿革、地理环境、社会变迁、经济发展等方面的专书。',
        author: '上海市地方志办公室',
        publishDate: new Date(2012, 8, 22)
    },
    {
        id: 3,
        title: '广州地方志',
        cover: 'https://dummyimage.com/150x200/4a5568/ffffff&text=广州志',
        description: '全面系统地记述广州地区自然、政治、经济、文化和社会的历史与现状的资料性文献。',
        author: '广州市地方志编委会',
        publishDate: new Date(2015, 3, 10)
    },
    {
        id: 4,
        title: '成都地方志',
        cover: 'https://dummyimage.com/150x200/4a5568/ffffff&text=成都志',
        description: '记录成都地区历史沿革、地理风貌、文化传承、经济发展的地方志书。',
        author: '成都市地方志办公室',
        publishDate: new Date(2018, 7, 30)
    },
    {
        id: 5,
        title: '西安地方志',
        cover: 'https://dummyimage.com/150x200/4a5568/ffffff&text=西安志',
        description: '记述西安地区自然、政治、经济、文化、社会等各方面情况的志书。',
        author: '西安市地方志编委会',
        publishDate: new Date(2019, 11, 5)
    },
    {
        id: 6,
        title: '南京地方志',
        cover: 'https://dummyimage.com/150x200/4a5568/ffffff&text=南京志',
        description: '记载南京地区历史变迁、文化发展、地理特征的地方志文献。',
        author: '南京市地方志办公室',
        publishDate: new Date(2020, 2, 18)
    }
])

// 当前选中的书籍索引
const currentBookIndex = ref(0)

// 当前选中的书籍
const currentBook = computed(() => books.value[currentBookIndex.value])

// 随机选择一个竖排书籍
const randomVerticalBook = computed(() => {
    const randomIndex = Math.floor(Math.random() * localBooks.value.length)
    return localBooks.value[randomIndex]
})

// 随机选择两个横排书籍
const randomHorizontalBooks = computed(() => {
    const shuffled = [...localBooks.value].sort(() => 0.5 - Math.random())
    return shuffled.slice(0, 2)
})

// 设置活动书籍
const setActiveBook = (index: number) => {
    currentBookIndex.value = index
}

// 自动轮播定时器
let autoPlayTimer: number | null = null

// 开始自动轮播
const startAutoPlay = () => {
    autoPlayTimer = setInterval(() => {
        currentBookIndex.value = (currentBookIndex.value + 1) % books.value.length
    }, 5000)
}

// 停止自动轮播
const stopAutoPlay = () => {
    if (autoPlayTimer) {
        clearInterval(autoPlayTimer)
        autoPlayTimer = null
    }
}

// 格式化日期
const formatDate = (date: Date): string => {
    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
}

// 组件挂载时开始自动轮播
onMounted(() => {
    startAutoPlay()
})

// 组件卸载时停止自动轮播
onUnmounted(() => {
    stopAutoPlay()
})
</script>

<style scoped>
.background {
    background-color: #f5efe6;
}

.clan-book-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    gap: 30px;
    font-family: 'Noto Sans SC', sans-serif;
    color: #2d3748;
}

/* 左侧部分样式（保持不变） */
.left-section {
    flex: 7;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #2d3748;
}

/* 书籍封面轮播图 */
.book-covers-carousel {
    position: relative;
    height: 300px;
    margin-bottom: 20px;
}

.carousel-container {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    height: 100%;
}

.book-cover-card {
    position: absolute;
    width: 180px;
    height: 250px;
    transition: all 0.5s ease;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transform-style: preserve-3d;
}

.book-cover-card.active {
    transform: translateX(0) scale(1.1);
    z-index: 3;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.book-cover-card.left {
    transform: translateX(-90px) scale(0.9);
    z-index: 2;
    opacity: 0.8;
}

.book-cover-card.right {
    transform: translateX(90px) scale(0.9);
    z-index: 2;
    opacity: 0.8;
}

.book-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 书籍详情区域 */
.book-details {
    background-color: #f7fafc;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.details-carousel {
    min-height: 150px;
    margin-bottom: 15px;
}

.book-info {
    text-align: center;
}

.book-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #2d3748;
}

.book-description {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
    color: #4a5568;
}

.book-meta {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 14px;
    color: #718096;
}

.author::before {
    content: "作者：";
    font-weight: 500;
}

.publish-date::before {
    content: "发布时间：";
    font-weight: 500;
}

/* 轮播指示器 */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #cbd5e0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.indicator.active {
    background-color: #4a5568;
}

/* 书籍详情按钮 */
.details-button {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #4a5568;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.details-button:hover {
    background-color: #2d3748;
}

/* 右侧部分样式（已修改） */
.right-section {
    flex: 5;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.more-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #5a3e2f;
    color: #f5efe6;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.more-button:hover {
    background-color: #8b6152;
    transform: translateY(-2px);
}

.local-books-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 竖排书籍卡片 */
.vertical-cards {
    display: flex;
    flex-direction: column;
}

.vertical-book-card {
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vertical-book-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.vertical-book-card .book-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.vertical-book-card .book-info {
    padding: 15px;
}

.vertical-book-card .book-title {
    font-size: 18px;
    margin-bottom: 10px;
    text-align: left;
}

.vertical-book-card .book-description {
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 1.5;
    color: #4a5568;
}

.vertical-book-card .book-meta {
    justify-content: space-between;
    font-size: 13px;
}

/* 横排书籍卡片（已加长） */
.horizontal-cards {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.horizontal-book-card {
    display: flex;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    /* 增加宽度 */
}

.horizontal-book-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.horizontal-book-card .book-image {
    width: 120px;
    /* 增加图片宽度 */
    height: 160px;
    /* 增加图片高度 */
    object-fit: cover;
    flex-shrink: 0;
}

.horizontal-book-card .book-info {
    flex: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.horizontal-book-card .book-title {
    font-size: 16px;
    margin-bottom: 8px;
    text-align: left;
}

.horizontal-book-card .book-description {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
    color: #4a5568;
    text-align: left;
}

.horizontal-book-card .book-meta {
    justify-content: space-between;
    font-size: 13px;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* 响应式设计 */
@media (max-width: 968px) {
    .clan-book-container {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .book-covers-carousel {
        height: 250px;
    }

    .book-cover-card {
        width: 150px;
        height: 210px;
    }

    .book-cover-card.active {
        transform: translateX(0) scale(1.05);
    }

    .book-cover-card.left {
        transform: translateX(-70px) scale(0.85);
    }

    .book-cover-card.right {
        transform: translateX(70px) scale(0.85);
    }

    .horizontal-book-card {
        flex-direction: column;
    }

    .horizontal-book-card .book-image {
        width: 100%;
        height: 160px;
    }
}
</style>